<template>
  <configCompositionTwoWindowStyle cdrWidth="46%" detailWidth="54%">
    <template slot="card">
      <search
              :loading="tableLoading"
              @refresh="refresh"
              @turnPage="turnPage"
              :currentPage="currentPage"
              :count="count"
              :pageSize="10"
              :isShowInput = 'false'
              :isReloadIvr="false"
              :showAdvSearch="false"
              :showAdd = "false"
              >
      </search>
      <weibo-table :tableHeader="tableHeader" :tableData="tableData" @updata="updata" @del="deleteWeibo" @resh ='queryList' :loading="tableLoading"></weibo-table>
    </template>
    <template slot="detail" v-if='isShowDetail'>
      <breadCrumb v-show="isShowDetail" :titleArr="titleArr" @back="cancle"></breadCrumb>
      <weibo-detail :weiboDetail="weiboDetail" :peerOptions="peerOptions" :robotOptions="robotOptions" @cancle="cancle" @refresh="refresh"></weibo-detail>
    </template>
  </configCompositionTwoWindowStyle>
</template>
<script>
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import search from '../base/search'
  import breadCrumb from '@/components/ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import WeiboTable from './WeiboTable.vue'
  import WeiboDetail from './WeiboDetail.vue'
  import { getCacheByKey } from '@/utils/m7Utils.js'
  export default {
    name: 'WeiboMange',
    data () {
      return {
        currentPage: 1,    //   当前页
        count: 0, // 总条数
        tableHeader: [
          {prop: 'name', label: this.$t('config.channel.weiboName')},
          {prop: 'to_peer', label: this.$t('public.queues')},
          {prop: 'status', label: this.$t('public.state')},
          {prop: 'lastUpdateTime', label: this.$t('config.channel.lastUpdateTime')},
          {prop: '', label: this.$t('sms.operate')}
        ],                        //   自定义 表头
        tableData: [],           //  表格数据
        tableLoading: false,     //   表格  loading
        isShowDetail: false,  // 是否要展示右边
        weiboDetail: {},  // 微博账号详情
        showDeleteWeioboModal: false, // 删除微博的窗口
        peerOptions: [],
        robotOptions: [],
        titleArr: [this.$t('config.channel.weiboManagement'), this.$t('config.channel.changeWeiboCutom')]
      }
    },
    props: {
      activeName: String,
      changeWeiboList: {type: Number, default: 0}
    },
    watch: {
      changeWeiboList (current) {
        if (current) {  // 添加微博成功之后，要刷新微博列表数据
          this.queryList()
        }
      }
    },
    components: {
      configCompositionTwoWindowStyle,
      search,
      breadCrumb,
      WeiboTable,
      WeiboDetail
    },
    methods: {
      queryList () { // 获取微博列表
        let data = {
          page: this.currentPage,
          pageSize: 10
        }
        this.tableLoading = true
        this.$store.dispatch('queryWeiboList', data).then(resp => {
          this.isShowDetail = false // 刷新列表的时候要关闭详情页
          this.tableLoading = false
          if (resp.success) {
            let weiboList = resp.list
            for (let i = 0; i < weiboList.length; i++) {
              let peer = getCacheByKey('mailQueues', 'Exten', weiboList[i].to_peer)
              if (peer) {
                weiboList[i].to_peer = peer.DisplayName
              }
              if (weiboList[i].robot) {
                let robot = getCacheByKey('robotConfig', '_id', weiboList[i].robot)
                if (robot) {
                  weiboList[i].robot = robot.robot_type
                }
              } else {
                weiboList[i].robot = this.$t('config.channel.noUsed')
              }
              if (weiboList[i].status === 'normal') {
                weiboList[i].status = this.$t('config.channel.used')
              } else {
                weiboList[i].status = this.$t('config.channel.abnormal')
              }
            }
            this.tableData = weiboList
            this.count = resp.count
          }
        })
      },
      turnPage (val) { // 翻页
        this.currentPage = val
        this.queryList()
      },
      refresh () { // 刷新
        this.queryList()
      },
      updata (val) { // 修改微博账号
        let data = {'_id': val._id}
        this.$store.dispatch('queryWeiboCfgById', data).then(resp => {
          if (resp.success) {
            let weiboData = resp.data
            if (weiboData.status === 'normal') {
              weiboData.status = this.$t('config.channel.used')
            } else {
              weiboData.status = this.$t('config.channel.abnormal')
            }
            this.weiboDetail = weiboData
            this.isShowDetail = true
          } else {
            this.$message.error(resp.message)
          }
        })
      },
      // addWeibo () { // 添加微博，事件外抛，tab切换到绑定微博的界面
      //   this.$emit('changeToBinding')
      // },
      deleteWeibo () { // 删除微博
        this.showDeleteWeioboModal = true
      },
      cancle () { // 点击取消按钮
        this.isShowDetail = false
      }
    },
    beforeMount () { // 加载组件时请求一次数据
      let p1 = this.$store.dispatch('getCache', { type: 'mailQueues' })
      let p2 = this.$store.dispatch('getCache', { type: 'robotConfig' })
      Promise.all([p1, p2]).then(([rep1, rep2]) => {
        this.queryList()
        this.peerOptions = this.$getCache('mailQueues') || []
        this.robotOptions = this.$getCache('robotConfig') || []
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
</style>




















